<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅行社管理系统 - 用户管理</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/main.css">
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="js/api/config.js"></script>
    <script src="js/api/auth.js"></script>
    <script src="js/components/Sidebar.js"></script>
</head>
<body>
    <div id="app">
        <div class="container-fluid">
            <div class="row">
                <sidebar-nav 
                    current-page="users"
                    @logout="handleLogout">
                </sidebar-nav>

                <!-- 主内容区 -->
                <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                    <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                        <h1 class="h2">用户管理</h1>
                        <div class="btn-toolbar mb-2 mb-md-0">
                            <button type="button" class="btn btn-primary" @click="showCreateModal">
                                <i class="bi bi-plus"></i> 新增用户
                            </button>
                        </div>
                    </div>

                    <!-- 用户列表 -->
                    <div class="table-responsive">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>姓名</th>
                                    <th>角色</th>
                                    <th>工作区</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="user in users" :key="user.id">
                                    <td>{{ user.id }}</td>
                                    <td>{{ user.username }}</td>
                                    <td>{{ user.full_name }}</td>
                                    <td>{{ user.role }}</td>
                                    <td>{{ getWorkareaName(user.workarea_id) }}</td>
                                    <td>{{ user.is_active ? '启用' : '禁用' }}</td>
                                    <td>
                                        <button class="btn btn-sm btn-outline-primary me-1" @click="showEditModal(user)">
                                            <i class="bi bi-pencil"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-danger" @click="handleToggleStatus(user)">
                                            <i :class="user.is_active ? 'bi bi-lock' : 'bi bi-unlock'"></i>
                                        </button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 新增/编辑用户模态框 -->
                    <div class="modal fade" id="userModal" tabindex="-1" ref="userModal">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">{{ isEditing ? '编辑用户' : '新增用户' }}</h5>
                                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                </div>
                                <div class="modal-body">
                                    <form @submit.prevent="handleSubmit">
                                        <div class="mb-3">
                                            <label class="form-label">用户名 *</label>
                                            <input type="text" class="form-control" v-model="form.username" required>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">邮箱 *</label>
                                            <input type="email" class="form-control" v-model="form.email" required>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">{{ isEditing ? '新密码' : '密码' }} {{ isEditing ? '' : '*' }}</label>
                                            <input type="password" class="form-control" v-model="form.password" :required="!isEditing">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">姓名</label>
                                            <input type="text" class="form-control" v-model="form.full_name">
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">角色 *</label>
                                            <select class="form-select" v-model="form.role" required>
                                                <option value="user">普通用户</option>
                                                <option value="admin">管理员</option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">工作区</label>
                                            <select class="form-select" v-model="form.workarea_id">
                                                <option value="">请选择</option>
                                                <option v-for="workarea in workareas" :key="workarea.ID" :value="workarea.ID">
                                                    {{ workarea.Name }}
                                                </option>
                                            </select>
                                        </div>
                                        <div class="mb-3">
                                            <div class="form-check">
                                                <input class="form-check-input" type="checkbox" v-model="form.is_active" id="isActive">
                                                <label class="form-check-label" for="isActive">启用</label>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" @click="handleSubmit" :disabled="isSubmitting">
                                        {{ isSubmitting ? '保存中...' : '保存' }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    </div>

    <!-- Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/api/config.js"></script>
    <script src="js/api/auth.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                currentUser: null,
                isAdmin: false,
                users: [],
                workareas: [],
                isEditing: false,
                isSubmitting: false,
                form: {
                    username: '',
                    password: '',
                    full_name: '',
                    role: 'user',
                    workarea_id: null,
                    is_active: true
                },
                modal: null
            },
            created() {
                // 检查登录状态和权限
                const token = localStorage.getItem(API_CONFIG.TOKEN_KEY);
                if (!token) {
                    window.location.href = '/index.html';
                    return;
                }

                const userStr = localStorage.getItem(API_CONFIG.USER_KEY);
                if (userStr) {
                    this.currentUser = JSON.parse(userStr);
                    this.isAdmin = this.currentUser.role === 'admin';
                    if (!this.isAdmin) {
                        window.location.href = '/dashboard.html';
                        return;
                    }
                }

                this.loadUsers();
                this.loadWorkareas();
            },
            mounted() {
                this.modal = new bootstrap.Modal(this.$refs.userModal);
            },
            methods: {
                async loadUsers() {
                    try {
                        const response = await apiClient.get('/users');
                        this.users = response.data;
                    } catch (error) {
                        console.error('加载用户列表失败:', error);
                        alert('加载用户列表失败');
                    }
                },
                async loadWorkareas() {
                    try {
                        const response = await apiClient.get('/workarea');
                        this.workareas = response.data;
                    } catch (error) {
                        console.error('加载工作区列表失败:', error);
                        alert('加载工作区列表失败');
                    }
                },
                getWorkareaName(workareaId) {
                    const workarea = this.workareas.find(w => w.ID === workareaId);
                    return workarea ? workarea.Name : '-';
                },
                showCreateModal() {
                    this.isEditing = false;
                    this.form = {
                        username: '',
                        password: '',
                        full_name: '',
                        role: 'user',
                        workarea_id: null,
                        is_active: true
                    };
                    this.modal.show();
                },
                showEditModal(user) {
                    this.isEditing = true;
                    this.form = {
                        ...user,
                        password: ''  // 编辑时不显示密码
                    };
                    this.modal.show();
                },
                async handleSubmit() {
                    this.isSubmitting = true;
                    try {
                        if (this.isEditing) {
                            await apiClient.put(`/users/${this.form.id}`, this.form);
                        } else {
                            await apiClient.post('/users', this.form);
                        }
                        this.modal.hide();
                        this.loadUsers();
                    } catch (error) {
                        console.error('保存用户失败:', error);
                        alert('保存用户失败');
                    } finally {
                        this.isSubmitting = false;
                    }
                },
                async handleToggleStatus(user) {
                    try {
                        await apiClient.put(`/users/${user.id}`, {
                            is_active: !user.is_active
                        });
                        this.loadUsers();
                    } catch (error) {
                        console.error('更新用户状态失败:', error);
                        alert('更新用户状态失败');
                    }
                },
                handleLogout() {
                    auth.logout();
                }
            }
        });
    </script>
</body>
</html> 